<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
   <!--  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
    <title>搜索</title>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/research.css">
<style>
    select {
        /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
        border: solid 1px #000;

        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;

        /*在选择框的最右侧中间显示小箭头图片*/
        background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

        outline: none;
        border: none;
        /*为下拉小箭头留出一点位置，避免被文字覆盖*/
        padding-right: 69px;
        /*center right是绝对位置，如果要改变位置就得用相对位置x=95% y=50%*/
        background:url(images/down-arrow.png) 90% 50%   no-repeat scroll transparent;
        background-size:50px 50px;
    }
</style>
</head>

<body>
<div>
    <form class="form-horizontal" role="form">
        <div class="form-group group1">
            <label class="col-sm-2 "><select>
                <option value ="volvo">成都</option>
                <option value ="saab">重庆</option>
                <option value="opel">青岛</option>
                <option value="audi">厦门</option>
            </select><!--<img src="images/down-arrow.png" alt="">--></label>
            <div class="col-sm-8 "><input type="text" class="form-control" placeholder="快速搜索你要找的职位" id="researchCon">
            </div>
            <span class="glyphicon glyphicon-search  " style="filter:alpha(opacity=50);opacity: 0.50;  position: absolute;
             margin-top: 5.5vw;  left: 20%;"></span>
            <label class="col-sm-2 ">取消</label>
        </div>
    </form>
</div>
<div class="guess">
    <div class="form-horizontal" role="form">
        <br>
        <div class="form-group group2"  id="hidebtn">
            <label class="col-sm-2 ">猜你要搜</label>
            <div class="col-sm-9"></div>
            <button class="col-sm-1 " onclick="hide()">×</button>
        </div>

        <span id="position-s"><div class="choice" onclick="research(this.text())">中医</div>
      <div class="choice" onclick="research(this.text())">护士</div>
      <div class="choice" onclick="research(this.text())">针灸师</div>
      <div class="choice" onclick="research(this.text())">营养师</div>
      <div class="choice" onclick="research(this.text())">药师助手</div>
      <div class="choice" onclick="research(this.text())">大保健专家</div></span>

    </div>
</div>
</body>
<script type="text/javascript">
    /* function research(content){
         document.getElementById("researchCon").value=content;
             }*/
    function hide() {
        document.getElementById("position-s").style.display = "none";
        document.getElementById("hidebtn").style.display = "none";
    }
</script>
</html>